<template>
   <div class="swiper-container">
    <swiper  
        :effect="'coverflow'"
        :grabCursor="true"
        :centeredSlides="true"
        :slidesPerView="3"    
      :autoplay="{ delay: 3000 }"  
      :modules = "modules"   
      :loop="true"
      :coverflowEffect="{
        rotate: 0,
        stretch: 0,
        depth: 100,
        modifier: 1,
        scale: 0.8,
        slideShadows: false,
      }"           
       @slideChange="handleSlideChange"
       @swiper="handleswiper"
      >
      <swiper-slide
        v-for="(item, index) in images"
        :key="index"
      >
        <img :src="item" class="swiper-image" />
      </swiper-slide>
    </swiper>
   </div>
</template>
<script setup name="swipercomp">
    import { ref,onMounted } from 'vue'
    // import Swiper JS
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Autoplay,EffectCoverflow } from 'swiper/modules';
    // import Swiper styles
    import 'swiper/css';
    const img1 = 'http://124.221.137.201:8081/Upload/Tables/SZ_CeremonyTemplate/202410051716048369/风景1908002.jpg'
    const img2 = 'https://swiperjs.com/demos/images/nature-1.jpg'
    const img3 = 'https://swiperjs.com/demos/images/nature-3.jpg'
const modules = [Autoplay,EffectCoverflow]
    const images = ref([
   
        img1,img2,img3,img1
      ])
const currentIndex = ref(0);

const handleSlideChange = (swiper) => {

    console.log('当前激活的幻灯片索引:', swiper);
}

const handleswiper = (s) => {
    console.log('handleswiper',s)
}

</script>
<style lang="less" scoped>
.swiper-container {
    display: flex;
    justify-content: center;
     width: 100%;
     height: 100%;
     background: url('../assets/img/bg.webp') center no-repeat;
     background-size: cover;
}
   .swiper-slide {
    background-position: center;
  background-size: cover;
  width: 300px;
  height: 300px;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>